import 'package:flutter/material.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int selcetedIndex = 0;
  var tabs = ["Nearby", "Recent", "Notice"];
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 24),
      child: Row(
        // 向下对其
        crossAxisAlignment: CrossAxisAlignment.end,
        // children: [
        //   MyTab(text: 'Nearby', isSelected: false),
        //   MyTab(text: 'Recent', isSelected: true),
        //   MyTab(text: 'Notice', isSelected: false),
        // ],
        children: List.generate(
            tabs.length,
            (index) => MyTab(
                  text: tabs[index],
                  isSelected: selcetedIndex == index,
                  callback: () => {
                    setState(()=>selcetedIndex = index)
                  },
                )),
      ),
    );
  }
}

class MyTab extends StatelessWidget {
  final String text;
  final bool isSelected;
  final Function callback;
  const MyTab(
      {super.key,
      required this.text,
      required this.isSelected,
      required this.callback
      });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: ()=>callback(),
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              text,
              style: TextStyle(
                  fontSize: isSelected ? 16 : 14,
                  color: isSelected ? Colors.black : Colors.grey,
                  fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500),
            ),
            Container(
              width: 20,
              height: 6,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: isSelected ? const Color(0xFFFF5A1D) : Colors.white,
                boxShadow:isSelected? [  BoxShadow(color: const Color(0xFFFF5A1D).withOpacity(0.4),blurRadius: 5,offset: const Offset(2, 2))]:[],
              ),
              
            )
          ],
        ),
      ),
    );
  }
}
